<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
onMounted(() => {
  // 使用id为canvas是的画板生成一个fabricCanvas
  const canvas = new fabric.Canvas('canvas', { width: 1200, height: 800 });
  const img1 = document.getElementById('img1');
  fabric.Image.fromURL(img1.currentSrc, img => { // 通过img1的currentSrc生成一个图片
    canvas.add(img); // 将图片添加到canvas
  }, { left: 100, top: 100 }); // 指定位置
});

</script>

<template>
  <div>
    <img id="img1" src="./head.jpg" />
    <canvas id="canvas"></canvas>
  </div>
</template>

<style scoped>
#img1 {
  display: none;
}
#canvas {
  margin: 10px;
  border: 1px solid #d3d3d3;
}
</style>